import React, { useState } from 'react';
import { Calendar, Tooltip } from 'antd';
import zhCN from 'antd/es/calendar/locale/zh_CN';
import moment from 'moment';
import style from './Calendar.css';


let mockData = [], dateData = [], costData = [], quotaData = [];
for ( var i = 0; i < 12; i++ ){
    costData.push(1000 + Math.round(Math.random() * 200));
    quotaData.push(1000 + Math.round(Math.random() * 200));
    dateData.push(i);
}
mockData.date = dateData;
mockData.cost = costData;
mockData.quota = quotaData;

let today = new Date();

function CustomCalendar({ currentDate, data, onChangeDate, mode, forReport, energyInfo, onDispatch, theme }){
    data = mockData;
    let currentDateStr = currentDate.format('YYYY-MM-DD').split('-');
    function dateCellRender(value){
        let itemDateStr = value.format('YYYY-MM-DD').split('-');
        // 判断当前日期是否在当月
        let isInMonth = itemDateStr[1] === currentDateStr[1] ? true : false ;
        let lessToday = new Date(value.format('YYYY-MM-DD')).getTime() <= today.getTime() ? true : false;
        let cost = data.cost  ? data.cost[itemDateStr[2] - 1] : 0;
        let quota = data.quota  ? data.quota[itemDateStr[2] - 1] : 0;
        let energy = data.energy  ? data.energy[itemDateStr[2] - 1] : 0;
        return (
            
                <div 
                    className={style['content-wrapper'] + ' ' + ( isInMonth  ?  quota && cost >= quota ? style['in-warning'] : style['in-month'] : '')}
                >
                    <div className={style['content']}>
                        <div className={style['content-head']}>{ itemDateStr[2] }</div>                                  
                        <div className={style['content-body']}>
                            <div style={{ marginBottom: forReport ? '0' : '1rem' }}>
                                { !forReport && <div style={{ marginRight:'1rem' }}>实际</div> }
                                <div className={style['text']}>{ isInMonth && lessToday ? cost && cost.toLocaleString() : '--' }</div>
                                <span className={style['unit']}>元</span>
                            </div>  
                            <div>
                                { !forReport && <div style={{ marginRight:'1rem' }}>预算</div> }
                                <div style={{ fontSize: forReport ? '1rem' : '1.2rem', fontWeight:'bold', marginLeft:'4px' }}>{ quota ? quota.toLocaleString() : '--' }</div>
                                <span className={style['unit']}>元</span>
                            </div>
                        </div>
                    </div>                      
                </div>
        )
    };
    function monthCellRender(value){
        let itemDateArr = value.format('YYYY-MM-DD').split('-');
        let lessMonth = value.month() <= today.getMonth() ? true : false; 
        let cost = data.cost ? data.cost[itemDateArr[1] - 1] : 0;
        let energy = data.energy ? data.energy[itemDateArr[1] - 1] : 0;
        let quota = data.quota ? data.quota[itemDateArr[1] - 1] : 0;
        
        return (
            <div 
                className={style['content-wrapper'] + ' ' + ( lessMonth ? quota && cost >= quota ? style['in-warning'] : style['in-month'] : '' )}
            >
                <div className={style['content']} style={{ justifyContent:'space-around', padding:'1rem' }}>
                    <div className={style['content-head']}>{ value.month() + 1 }</div>
                    <div className={style['content-body']}>
                        <div style={{ marginBottom: forReport ? '0' : '1rem' }}>
                            { !forReport && <div style={{ marginRight:'1rem' }}>实际</div> }
                            <div className={style['text']}>{ lessMonth ? cost.toLocaleString() : '--' }</div>
                            <span className={style['unit']}>元</span>
                        </div>  
                        <div>
                            { !forReport && <div style={{ marginRight:'1rem' }}>预算</div> }
                            <div style={{ fontSize: forReport ? '1rem' : '1.2rem', fontWeight:'bold', marginLeft:'4px' }}>{ quota ? quota.toLocaleString() : '--' }</div>
                            <span className={style['unit']}>元</span>
                        </div>  
                    </div>
                </div>
            </div>
        )
    }
    return (
        <Calendar
            className={style['custom-calendar'] + ' ' + ( theme === 'dark' ? style['dark'] : '') + ' ' + ( forReport ? style['small'] : '' )}
            locale={zhCN}
            value={currentDate}
            mode={mode}
            headerRender={()=>null}
            dateFullCellRender={dateCellRender}
            monthFullCellRender={monthCellRender}
            onSelect={
               
                value=>{
                    if ( onChangeDate && typeof onChangeDate === 'function' ) {
                        let selectedDate = value.format('YYYY-MM-DD').split('-');
                        if ( mode === 'month' && selectedDate[1] !== currentDateStr[1] ) {
                            onChangeDate(value);
                            // onDispatch({ type:'baseCost/fetchCalendar', payload:{ mode, year:selectedDate[0], month:selectedDate[1] }});
                        }                        
                    }
                }
               
            }
        />
    )
}

export default React.memo(CustomCalendar);